<template>
	<div class="lifeline-engineer">
		<!--<div class="lifeline-engineer-left">
			<div class="list">
				<vue3-seamless-scroll hover="true" hover-stop="true" :list="arrList" :step="0.2">
					<div class="list-item" v-for="(item, index) in arrList" :key="index" :title="item.name + '：' + item.value">
						<div class="list-item-title text-ellipsis">
							<span class="list-item-title-dot"></span>{{ item.name || '' }}
						</div>
						<div class="list-item-num">{{ item.value || '' }}</div>
					</div>
				</vue3-seamless-scroll>
			</div>
		</div>-->
		<div class="lifeline-engineer-right">
			<div id="lifelineChartsRef" ref="lifelineChartsRef" class="echats-box"></div>
		</div>
	</div>
</template>

<script setup name="LifelineEngineer">
// 引入echats
import * as echarts from 'echarts';
import { getCurrentInstance, onMounted } from 'vue';
// 引入接口
import { getProjectSituation } from '@/api/buildHouse.js';
import bg_echarts from '@/assets/images/buildHouse/bg_echarts.png';
import bg_echarts1 from '@/assets/images/buildHouse/bg_echarts1.png';
// 当前实例
const proxy = getCurrentInstance();

// 数据
let arrList = ref([]);
// 图表
let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(proxy.refs.lifelineChartsRef);
	}
	let arrData = [];
	if (data && data.length) {
		let maxValue = 10000;
		// 数据处理
		data.map((item, index) => {
			if (index == 0) {
				maxValue = item.value;
			}
			// 设置雷达图的最大值
			item.max = maxValue;
			// 每个角的文本
			item.text = item.value || '';
			// 颜色
			item.color = '#FFFFFF';
			// 数据
			arrData.push(item.value || 0);
		});
	}
	var i = 0;
	// 配置项
	const option = {
		color: ['#46FFFF'],
		radar: {
			indicator: data,
			// 半径
			radius: 55,
			// 坐标系起始角度
			startAngle: 90,
			// 指示器名称和指示器轴的距离
			nameGap: 15,
			// 指示器轴的分割段数
			splitNumber: 6,
			// 文本
			name: {
				show:true,
				textStyle: {
					color: '#FFFFFF',
					fontSize: 14,
					fontWeight: 'bolder',
					
				},
				//formatter:['{b|}{value}'].join('\n'),
        formatter: function(params,value) {
        	console.log(params,value) 
        	i++
          // 自定义标签显示内容    
          if(i == 2||i == 3){
          	if(params.length == 5){
          		return '{b|} {c|' + params + '}{d1|TOP ' + i + '}          {a|' + value.value+"%" + '}';
          	}else{
          		return '{b|} {c|' + params + '}{d|TOP ' + i + '}          {a|' + value.value+"%" + '}';
          	}         	
          }else{
          	if(params.length == 5){
          		return '{a|' + value.value+"%" + '}   {b|} {c|' + params + '}{d1|TOP ' + i + '}';
          	}else{
          		return '{a|' + value.value+"%" + '}   {b|} {c|' + params + '}{d|TOP ' + i + '}';
          	}          	
          }            
        },
        rich: {
        	a: {
        		width:55,
        		height:55,
            color: '#FFFFFF',
            fontFamily: 'DS-Digital-Bold, DS-Digital',
            fontSize: 24,
            align: 'center',
            fontWeight: 'bold',
            //position: "outside",
            backgroundColor: {
            	//在这里填写背景图片路径
                image: bg_echarts
           	},
          },
          b: {
          	width:70,
        		height:40,        		
        		verticalAlign: 'middle',
            backgroundColor: {
            	//在这里填写背景图片路径
                image: bg_echarts1
           	},
            
          },
          c:{
          	fontFamily: 'Source Han Sans CN-Regular, Source Han Sans CN',
        		verticalAlign: 'bottom',
        		fontWeight: 400,
        		fontSize: 13,
        		padding:[10,0,0,-70],
          },
          d:{
          	fontSize: 12,
						fontFamily: 'Helvetica Neue LT Pro-75 Bold, Helvetica Neue LT Pro',
						fontWeight: 'bold',
						color: '#050426',
//						verticalAlign: 'middle',
						padding:[20,0,0,-50],
          },
          d1:{
          	fontSize: 12,
						fontFamily: 'Helvetica Neue LT Pro-75 Bold, Helvetica Neue LT Pro',
						fontWeight: 'bold',
						color: '#050426',
//						verticalAlign: 'middle',
						padding:[20,0,0,-63],
          }
        }
			},
			axisLine: {
				lineStyle: {
					color: '#095CFD',
				}
			},
			splitLine: {
				lineStyle: {
					color: '#095CFD',
				}
			},
			splitArea: {
				areaStyle: {
					color: 'transparent',
				}
			}
		},
		series: [
			{
				type: 'radar',
				data: [
					{
						value: arrData,
						color: '#FFFFFF',
						symbol: 'circle',
						symbolSize: 8,
						areaStyle: {
							// color: 'rgba(70, 255, 255, 0.8)',
							color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
								{ offset: 0, color: 'rgba(70,255,255,0.4)' },
								{ offset: 0.5, color: 'rgba(34,128,254,0.6)' },
								{ offset: 1, color: 'rgba(196,7,254,0.8)' }
							]),
							shadowBlur: 10,
						},
						//label: makeLabel("123", "30%"),
					},
				]
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}
// 加载数据
const getData = () => {
	/*1表示新建*/
	getProjectSituation("1").then(res => {
		const { code, data } = res;
		if (code == 200 && data ) {
			data.map((item, index) => {
				
				// 数据
				arrList.value.push({
					name: item.type,
					value: item.num || 0
				});
			});
			arrList.value.sort((a, b) => b.value - a.value);

			// 渲染图表
			renderChart(arrList.value);
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
.lifeline-engineer {
	display: flex;
	justify-content: space-between;
	align-items: center;

	&-left {
		width: 160px;

		.list {
			height: 185px;
			overflow: hidden;
		}

		.list-item {
			width: 110px;
			// width: 130px;
			height: 55px;
			margin: 10px auto;
			background: linear-gradient(180deg, rgba(0, 162, 211, 0.38) 0%, rgba(0, 71, 73, 0.38) 100%);
			border-radius: 4px 4px 4px 4px;
			border: 1px solid rgba(70, 255, 255, 0.2);

			&-title {
				height: 26px;
				line-height: 26px;
				font-size: 16px;
				color: #FFFFFF;

				&-dot {
					display: inline-block;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background: #FFFFFF;
					margin: 0 10px;
				}
			}

			&-num {
				text-align: center;
				font-size: 22px;
				color: #46FFFF;
			}
		}
	}

	&-right {
		width: calc(100%);
		margin: 20px auto 0;
	}

	.echats-box {
		width: 100%;
		height: 250px;
	}
}
</style>